<template>
    <div class="pagemain">
        <!-- 头部导航 -->
        <div class="header">
            <van-nav-bar title="我的信息" left-arrow @click-left="toBack" />
        </div>

        <van-uploader class="avatar-uploader" v-model="fileList" :after-read="proChange" :auto-upload="false">
            <img :src="imgSrc == '' ? imgPth : imgSrc" class="userImg">
        </van-uploader>

        <div class="btnBox" @click="subImg">确定</div>

    </div>
</template>

<script>

import { editUser } from '../../network/user'
import { alPath } from "../../network/request";
export default {
    name: 'HomeR',
    data() {
        return {
            alPath,
            imgPth: alPath + 'zhonghui/user/' + JSON.parse(localStorage.user).userImg,
            imgSrc: '',
            user: JSON.parse(localStorage.user),
            fileList: [],
        }
    },
    mounted() {

    },
    methods: {
        proChange: function (file) {
            console.log(file);
            this.imgSrc = file.content;
            // this.imgSrc = file.file
        },
        toBack() {
            this.$router.go(-1)
        },
        subImg: function () {
            if (this.fileList.length == 0) {
                this.$toast('请选择图片')
            } else {


                let fd = new FormData();
                fd.append("file", this.fileList[0].file);
                fd.append("userId", localStorage.userId);

                editUser(fd).then(res => {
                    if (res.flag) {
                        console.log(res);
                        this.user.userImg = res.data.userImg
                        localStorage.user = JSON.stringify(this.user)
                        this.$toast('修改成功')
                    }
                })

            }
        },


    },
    created() {
    },
    //计算属性
    computed: {

    },
    filters: {

    }

}

</script>

<style lang='less' scoped>
.header .van-icon {
    color: #333;
    font-size: 40px;
    font-weight: bold;
}

.header .van-nav-bar__text {
    color: #333;
}

.header {
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 88px;
    background-color: #fff;
    // padding-top: 60px;
}

.pagemain {
    background: #f2f2f2;
    height: 100vh;
}

/deep/.van-nav-bar__text,
/deep/.van-nav-bar__left,
/deep/.van-nav-bar .van-icon {
    color: #333;
}


.userImg {
    display: block;
    margin: 200px auto 0;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.btnBox {
    margin: 140px auto 0;
    width: 500px;
    height: 80px;
    line-height: 80px;
    background: -webkit-linear-gradient(left, #FF8023, #FF3B14);
    background: linear-gradient(to right, #FF8023, #FF3B14);
    border: none;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    text-align: center;
    color: #fff;
    font-size: 32px;
}

.avatar-uploader {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/deep/.van-uploader__preview {
    display: none;
}
</style>